import React, { useState } from 'react'
import { Table, Button } from 'antd';
import './index.scss'
import { UploadOutlined } from '@ant-design/icons';
import { useSelector } from 'react-redux';
import { useDispatch } from 'react-redux';
import { SetPageSizeAction, SetCurrentPageAction } from '../../../store/afterLoanStore/action';

export default function List(props) {
    const [state, setState] = useState({
        selectedRowKeys: []
    })

    const dispatch = useDispatch()

    const pageSize = useSelector(state => state.afterLoanStore.pageSize)
    const count = useSelector(state => state.afterLoanStore.count)
    // const [pageSize, setPageSize] = useState('10')

    const onSelectChange = selectedRowKeys => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        setState({ selectedRowKeys })
    }

    const { selectedRowKeys } = state
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange
    }

    const goToAdd = () => {
        props.addUrl && props.push && typeof props.push === 'function' && props.push({
            pathname: props.addUrl,
            state: 1
        })
    }

    const addBtn = (
        <Button type='primary' onClick={goToAdd} >新增</Button>
    )

    const exportBtn = (
        <Button type="default" className='uploadOut' icon={<UploadOutlined />}>导出</Button>
    )

    return (
        <div className="after-list">
            <div className="list-head">
                <span className="list-head-txt">数据列表</span>
                <div className='uploadOut'>
                    {props.isExportBtn ? exportBtn : null}
                    {props.isAdd ? addBtn : null}
                </div>
            </div>
            <Table scroll={{ x: 'max-content' }} rowSelection={rowSelection} columns={props.columns} dataSource={props.data || []} pagination={
                {
                    total: count || 0,
                    pageSizeOptions: ['10', '20', '30'],
                    showSizeChanger: true,
                    showQuickJumper: true,
                    defaultCurrent: 1,
                    defaultPageSize: 10,
                    onChange: (page, pageSize) => {
                        // console.log(page, pageSize);
                        // setPageSize(pageSize)
                        dispatch(SetCurrentPageAction(page))
                        dispatch(SetPageSizeAction(pageSize))

                        switch (props.type) {
                            case 'warning':
                                props.getWarningList && typeof props.getWarningList === 'function' && props.getWarningList(page, pageSize)
                                break
                            // dispatch(WarningListAsyncAction({
                            //     currentPage: page,
                            //     pageSize,
                            //     data: {
                            //         ...props.searchCondition
                            //     }
                            // }))
                            //     .then(res => {
                            //         message.success(res.msg)
                            //     })
                            //     .catch(err => {
                            //         message.error("查询失败：", err)
                            //     })
                            default:
                                return
                        }
                    },
                    showTotal: (total = count || 0) => (
                        `共${Math.ceil(total / pageSize)}页/${total}条数据`
                    )
                }
            }></Table>
        </div >
    )
}
